<template>
  <div>
    <!-- 搜索区域 -->
    <!-- 向查询板块传入家在数据的方法和page -->
    <userSearchForm  :page="page" :loadData="loadData"/>
    <!-- 按钮区域 -->
    <userToolsBtns
    :selectUserIds="selectUserIds"
    :tableData="tableData"
    @addUserHandle="addUserHandle"
    :deleteAllUser="deleteAllUserHandle"
     />
    <!-- 表格区域 -->
    <userTable 
    :tableData="tableData"
     :loadData="loadData" 
     :page="page"
     :total="total" 
     :setSelectUserIds="setSelectUserIds"
     :setDialogVisible="setDialogVisible"
     />

    <!-- 弹出层 -->

    <el-dialog      
     :title="userid === 0 ? '新增用户' : '修改用户'"
     :visible.sync="dialogVisible" 
     :close-on-click-modal="false" 
     :close-on-press-escape="false">
      <addUserForm v-if="userid===0" :setDialogVisible="setDialogVisible" />
      <editUserForm  v-else :userid="userid" :setDialogVisible="setDialogVisible" />

    </el-dialog>
  </div>
</template>

<script>
import userSearchForm from './ui/userSearchForm.vue'
import userToolsBtns from './ui/userToolsBtns.vue'
import userTable from './ui/userTable.vue'
import addUserForm from './ui/addUserForm.vue'
import editUserForm from './ui/editUserForm.vue'

import { getUsersApi,deleteAllApi } from '@/api/userApi'
export default {
  components: {
    userSearchForm,
    userToolsBtns,
    userTable,
    addUserForm,
    editUserForm
  },
  data() {
    return {
      dialogVisible: false,     //用于显示"新增用户"表单
      tableData: [],    //存储表格数据
      total: 0,           //表格区域的页面数
      selectUserIds: [],     
      userid:0
    }
  },
  //page为router文件中的sys路由文件中返回的变量
  props:["page"],
  watch:{
    dialogVisible(value){
      !value  && (this.userid=0)
    }
  },
  // 生命周期函数，初始化调用数据，参数为子组件userTable传递的
  mounted() {
    this.loadData(this.page, this.$route.query)
  },
  methods: {
   //显示“新增用户”表单开关
        addUserHandle(show) {
      this.dialogVisible = show
    },

      // 加载用户数据，默认显示第一页，否则根据传参显示-
    async loadData(page = 1, search = null) {
      let ret = await getUsersApi(page,search) 
      if (ret.code === 0) {
        this.total = ret.data.total
        this.tableData = ret.data.users     //数据格式为数组嵌套对象
        // console.log(this.tableData);
      }
    },
    //父组件的该方法传给子组件去执行操作
    //删除选中的用户
    async deleteAllUserHandle(ids){
      let page = this.page
      // 删除操作，传入数据的id进行通信
      let ret = await deleteAllApi(ids)
      if (ret.code === 0) {    
        // 删除成功,判断是否要实现全选删除
        if (this.tableData.length == ids.length) {
          if (page != 1) {   //如果当前页不是第一页
            page--
          }
        }
        // 当前路由的查询参数进行更新，展开对象，将其中的 page 参数替换为新的值
        this.$router.replace({ query: { ...this.$route.query, page } })
        this.loadData(page)
      }
      
    },

    //该方法会传给子组件，用来进行多选操作
    setSelectUserIds(ids) {
      // console.log(ids);  //打印数据中的id
      let uid = this.$store.getters.userid
      ids.splice(ids.indexOf(uid), 1)
      this.selectUserIds = ids
    },
    //对弹出表单进行操作
    setDialogVisible(show,userid=0) {
      console.log(135);

      this.dialogVisible = show
      // 表单打开时，修改表单的标题
      if(show){
        this.userid=userid
      }
       // 关闭弹出层时才进行再次请求数据
      !show && this.loadData()
    },
  }
}
</script>

<style  scoped>
.search-form {
  background: #fff;
  padding: 10px;
  margin-top: 5px;
}
</style>